<script lang="ts" setup>
  import { provide, ref, watch } from "vue";

  interface MenuProps {
    gap?: number;
    selectedKeys?: string[];
    iconTextGap?: number | string;
  }

  const props = withDefaults(defineProps<MenuProps>(), {
    selectedKeys: [] as any,
    iconTextGap: 6,
  });
  const menuKeys = ref<string[]>([]);
  const activedKey = ref(props.selectedKeys[0]);

  watch(
    () => props.selectedKeys,
    (newValue: any) => {
      activedKey.value = newValue[0];
    }
  );

  provide("menuKeys", menuKeys);
  provide("activedKey", activedKey);
  provide("iconTextGap", props.iconTextGap);
</script>

<template>
  <div class="umrp-menu">
    <umrp-container :gap="gap">
      <slot></slot>
    </umrp-container>
  </div>
</template>

<style lang="scss" scoped>
  .umrp-menu {
    cursor: pointer;
    padding: 4px 8px;
  }
</style>
